<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>飞机表面缺陷检测系统</title>
    <style>
        body {
            /* 设置背景颜色为淡灰色，营造简约氛围 */
            background-color: #f4f4f9;
            /* 使用 Arial 字体，若不可用则采用系统默认无衬线字体 */
            font-family: Arial, sans-serif;
            /* 使页面内容在垂直和水平方向上居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 页面高度占满视口高度 */
            height: 100vh;
            /* 去除默认的外边距 */
            margin: 0;
        }

        .container {
            /* 设置容器的背景颜色为白色 */
            background-color: #fff;
            /* 为容器添加内边距，使内容与边框有一定间距 */
            padding: 40px;
            /* 为容器添加圆角效果 */
            border-radius: 8px;
            /* 为容器添加阴影，增强立体感 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            /* 文本内容居中显示 */
            text-align: center;
        }

        h1,
        h2,
        h3 {
            /* 设置标题的字体颜色为深灰色 */
            color: #333;
            /* 去除标题的默认外边距 */
            margin: 0;
        }

        h1 {
            /* 设置一级标题的字体大小为 32px */
            font-size: 32px;
            /* 为一级标题添加底部外边距，增加间距 */
            margin-bottom: 15px;
        }

        h2 {
            /* 设置二级标题的字体大小为 24px */
            font-size: 24px;
            /* 为二级标题添加底部外边距，增加间距 */
            margin-bottom: 10px;
        }

        h3 {
            /* 设置三级标题的字体大小为 18px */
            font-size: 18px;
            /* 为三级标题添加底部外边距，增加间距 */
            margin-bottom: 20px;
        }

        .code-display {
            /* 设置验证码区域的背景颜色为淡蓝色 */
            background-color: #e6f7ff;
            /* 为验证码区域添加内边距 */
            padding: 15px;
            /* 为验证码区域添加圆角效果 */
            border-radius: 4px;
            /* 设置验证码的字体大小为 48px */
            font-size: 48px;
            /* 设置验证码的字体颜色为蓝色 */
            color: #007bff;
            /* 为验证码区域添加底部外边距，增加间距 */
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>{{ h1 }}</h1>
        <h2>{{ h2 }}</h2>
        <h3>{{ h3 }}</h3>
<!--        <h1>{{ val_code }}</h1>-->
        <div class="code-display">{{ code }}</div>
    </div>
</body>

</html>